<template>
    <div>
        <h1>保险产品</h1>
      <el-table :data="insures" border :stripe="true" style="width: 100%">
			<el-table-column label="保险编号"  prop="_id"></el-table-column>
			<el-table-column label="保险名称"  prop="name"></el-table-column>
            
			<el-table-column label="缴费类型"  prop="payType"></el-table-column>
			<el-table-column label="适用人群"  prop="suitableFor"></el-table-column>
            <el-table-column label="可否续保"  prop="renew" :formatter="formatBoolean"></el-table-column>
            <el-table-column label="保单形式"  prop="policy"></el-table-column>
            <el-table-column label="保险价格"  prop="price"></el-table-column>
            <el-table-column label="所属分类"  prop="typesdata">
                <!-- <template slot-scope="scope">
                    <span v-for="(item,index) in getTeacher(scope.row.teachersdata)" :key="index">{{item.name}} </span>
                </template> -->
            </el-table-column>
			
			
			<el-table-column label="操作" width="150px" prop="_id">
				<template slot-scope="scope">
					
					<!-- <input type="text" :value="scope.row._id"> -->
					<el-button size="mini" ><router-link :to="'/adminsSystem/insuresUpdate/'+scope.row._id">修改</router-link> </el-button>
					<el-button size="mini" type="danger" @click="delInsures(scope.row._id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
        <div>
			<el-select placeholder="请选择显示条数"  v-model="pageData.pageSize" style="float:left" >
				<el-option value="1"> 1 </el-option>
				<el-option value="2"> 2 </el-option>
				<el-option value="3"> 3 </el-option>
				<el-option value="4"> 4 </el-option>
			</el-select>
			<el-tag type="info" style="float:left;height:40px;line-height:40px" >共计
				<span>{{pageData.total}}  </span>
				条数据
			</el-tag>
			
			
			<el-button-group style="float:right">
				<el-button type="primary" @click="firtsPage">首页</el-button>
				<el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
				<el-button type="primary" icon="el-icon-arrow-right" @click="nextPage">下一页</el-button>
				<el-button type="primary" @click="lastPage">尾页</el-button>
			</el-button-group>
			<el-tag type="info" style="height:40px;line-height:40px" >
				<span>{{pageData.currentPage}}</span>
				/
				<span>{{pageData.pages}} </span>
				页
			</el-tag>
		</div>
    </div>
</template>

<script>
import {createNamespacedHelpers} from "vuex"
const { mapActions, mapState } = createNamespacedHelpers("insuresList");
export default {
    created(){
        this.getInsures()
    },
    data(){
        return{

        }
    },
    computed:{
        ...mapState(['insures','pageData'])
    },
    methods:{
        ...mapActions(['getInsures','delInsures','firtsPage','lastPage','nextPage','prevPage']),
        formatBoolean: function (row, column, renew) {
                var ret = ''  //你想在页面展示的值
                if (renew) {
                    ret = "是"  //根据自己的需求设定
                } else {
                    ret = "否"
                }
                return ret;
            },
    },
    watch:{
        pageData:{
            handler(){
                this.getInsures()
            },
            immediate:true,
            deep:true
        },
        'pageData.pageSize':{
             handler(){
                 this.getInsures()
                    this.pageData.currentPage =1
             }
        },
        searchdata:{
            handler(){
                this.getInsures()
                this.pageData.currentPage =1
            },
            deep:true
        }
    }
}
</script>

<style>
a{
    text-decoration: none;
    color:black
}
</style>